import { PageContainer } from '@ant-design/pro-components';
import React, { useEffect, useState } from 'react';
import { Avatar, Button, Card, Descriptions, Divider, Form, Input, List, message, Space, Spin } from 'antd';
import { TaobaoOutlined } from '@ant-design/icons';
import { useParams } from '@umijs/max';
import { getInterfaceInfoByIdUsingGET, invokeInterfaceInfoUsingPOST } from '@/services/linapi-back/interfaceInfoController';
import ReactECharts from 'echarts-for-react';
import { ListTopInvokeInterfaceInfoUsingGET } from '@/services/linapi-back/analysisController';
import Item from 'antd/lib/list/Item';

const interfaceAnalysis: React.FC = () => {
  const [data,setData]=useState<API.InterfaceInfoVO[]>([]);
  const [loading,setLoading]=useState(true);

  useEffect(()=>{
    setLoading(true);
    try {
      ListTopInvokeInterfaceInfoUsingGET().then(res=>{
        if(res.data){
          setData(res.data);
        }
      })
    } catch (e:any) {
      
    }
    setLoading(false);
  },[]);
  const charData=data.map(item=>{
    return {
      value:item.totalNum,
      name:item.name
    }
  })
  const option = {
    title: {
      text: '调用次数统计',
      subtext: '',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '接口-次数',
        type: 'pie',
        radius: '50%',
        data: charData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  
  return (
    <PageContainer title="统计分析">
      <ReactECharts showLoading={loading} option={option} />
    </PageContainer>
  );
};

export default interfaceAnalysis;
